@mermaid-js/mermaid-cli 9.1.6 → 9.1.7

package/README.md

@@ -21,6 +21,26 @@ mmdc -i input.mmd -o output.svg
 mmdc -i input.mmd -o output.png -t dark -b transparent
 ```
 
+### Animating an SVG file with custom CSS
+
+The `--cssFile` option can be used to inline some custom CSS.
+
+Please see [./test-positive/flowchart1.css](test-positive/flowchart1.css) for an example of a CSS file that has animations.
+
+**Warning**: If you want to override `mermaid`'s [`themeCSS`](https://mermaid-js.github.io/mermaid/#/Setup?id=theme), we recommend instead adding `{"themeCSS": "..."})` to your mermaid `--configFile`. You may also need to use [`!important`](https://developer.mozilla.org/en-US/docs/Web/CSS/important) to override mermiad's `themeCSS`.
+
+**Warning**: Inline CSS files may be blocked by your browser, depending on the [HTTP Content-Security-Policy header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) of the website that hosts your SVG.
+
+```sh
+mmdc --input test-positive/flowchart1.mmd --cssFile test-positive/flowchart1.css -o docs/animated-flowchart.svg
+```
+
+<details>
+  <summary>Example output: docs/animated-flowchart.svg</summary>
+
+  ![docs/animated-flowchart.svg](docs/animated-flowchart.svg)
+</details>
+
 ### Transform a markdown file with mermaid diagrams
 
 ```sh
@@ -43,6 +63,14 @@ graph
 sequenceDiagram
    [....]
 ```
+
+### Mermaid with custom title/desc
+```mermaid
+graph
+   accTitle: My title here
+   accDescr: My description here
+   A-->B
+```
 ~~~
 
 Becomes:
@@ -53,6 +81,9 @@ Becomes:
 
 ### Some more markdown
 ![diagram](./readme-2.svg)
+
+### Mermaid with custom title/desc
+![My description here](./readme-3.svg "My title here")
 ```
 
 ### Piping from stdin